<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		html,body{
			margin: 0;
			height: 100%;
		}
		.header{
			width: 100%;
			height: 60px;
			line-height: 60px;
			text-align: center;
			background-color: #000;
		}
		.container{
			width: 1200px;
			margin: 0 auto;
		}
		.header .container{
			height: 60px;
			background-color: orange;
		}
		.wrap{
			width: 100%;
			height: 100%;
		}
		.wrap .container{
			height: 100%;
		}

		.wrap .left{
			width: 10%;
			height: 100%;
			float: left;
			background-color: yellowgreen;
		}
		.wrap  .right{
			width: 10%;
			height: 100%;
			float: right;
			background-color: orchid;
		}
		.wrap .center{
			height: 100%;
			background-color: purple;
			margin: 0 130px;
		}

		.footer{
			width: 100%;
			height: 100px;
		}
		.footer .container{
			height: 100px;
			background-color: green;
		}


	</style>
</head>
<body>
	<!--头部 -->
	<div class="header">
		<div class="container">头部</div>
	</div>
	<!-- 主体内容 -->
	<div class="wrap">
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
			<div class="center">
				mjj
			</div>
		</div>
	</div>

	<!-- 脚部 -->
	<div class="footer">
		<div class="container"></div>
	</div>
</body>
</html>